<template>
  <div class="tw-mt-10">
    <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;" >
      选题统计
    </div>
    <div class="tw-grid tw-grid-cols-2 tw-m-5 tw-gap-10" style="height: 45vh;">
      <div id="chart-1" class="tw-w-full tw-h-full tw-border tw-rounded-2xl">
      </div>
      <div id="chart-2" class="tw-w-full tw-border tw-h-full tw-rounded-2xl"></div>
    </div>
    <q-separator class="tw-m-7" />
  </div>
</template>

<script setup>

import {api} from "boot/axios";
import {onMounted, ref} from "vue";
import * as echarts from 'echarts'
let selected = ref([])
let notSelected = ref([])
let s1 = ref([])
let s2 = ref([])
let allStudent = ref([])

let info = JSON.parse(localStorage.getItem('info'))
onMounted(() => {


  api({
    url: '/job/project/getselected?'+new URLSearchParams({dept:info.dept}),
    method: 'get'
  }).then(res => {
    let data = res.data
    selected.value = data.data
  }).then(() => {
    api({
      url: '/job/student/getdeptstudent?'+new URLSearchParams({dept:info.dept}),
      method: 'get'
    }).then(res => {
      let data = res.data
      allStudent.value = data.data
    }).then(()=>{
      for(let i=0;i<allStudent.value.length;i++){
        let flag = true
        for(let j=0;j<selected.value.length;j++){
          if(allStudent.value[i].snum===selected.value[j].snum){
            flag = false
            break
          }
        }
        if(flag){
          notSelected.value.push(allStudent.value[i])
        }
      }
      let major = []
      allStudent.value.map(item => {
        if(major.indexOf(item.major)===-1){
          major.push(item.major)
        }
      })
      let data = {"selected":{}, "notSelected":{}}
      for(let i =0 ;i<major.length;i++){
        data.selected[major[i]] = 0
        data.notSelected[major[i]] = 0
      }
      for(let i =0 ;i<selected.value.length;i++){
        if(data.selected[selected.value[i].major] === undefined){
          data.selected[selected.value[i].major] = 1
        }else{
          data.selected[selected.value[i].major] += 1
        }
      }
      for(let i =0 ;i<notSelected.value.length;i++){
        if(data.notSelected[notSelected.value[i].major] === undefined){
          data.notSelected[notSelected.value[i].major] = 1
        }else{
          data.notSelected[notSelected.value[i].major] += 1
        }
      }

      let tmp = []
      for(let i in data.selected){
        tmp.push([i, data.selected[i], data.notSelected[i]] )
      }
      let chart2 = echarts.init(document.getElementById('chart-2'))
      let option2 = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['选择', '已选', '未选'],
            ...tmp
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, ]
      };
      chart2.setOption(option2)

    })
  })
  api({
    url: '/job/project/getselectedproject?'+new URLSearchParams({dept:info.dept}),
    method: 'get'
  }).then(res => {
    let data = res.data
    s1.value = data.data
  }).then(() => {
    api({
      url: '/job/project/getnotselectedproject?' + new URLSearchParams({dept: info.dept}),
      method: 'get'
    }).then(res => {
      let data = res.data
      s2.value = data.data
    }).then(() => {
      let chart = echarts.init(document.getElementById('chart-1'))
      let option =  {
        series: [
          {
            type: 'gauge',
            max:s1.value.length+s2.value.length,
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.2, '#cee871'],
                  [0.7, '#58f54e'],
                  [1, '#19dc0a']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'inherit'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 40,
              fontSize: 20,
              formatter: function (val) {
                return Math.ceil(val);
              },
            },
            detail: {
              valueAnimation: true,
              formatter: '课题选择{value}',
              color: '#35b7c7',
              fontSize:20
            },
            data: [
              {
                value: s1.value.length
              }
            ]
          }
        ]
      };
      chart.setOption(option)

    })
  })

})
</script>

<style scoped>

</style>
